<template>
    <div class="newsDetail">
      <h3 class="newsTitle">{{article.title}}</h3>
      <p class="newsTime">{{article.created_at.slice(0,10)}}</p>
      <div class="ql-editor" v-html="article.body"></div>
    </div>
</template>

<script>
    export default {
        name: "NewsDetail",
      data(){
          return {
            article:{
              body:'',
              created_at:'',
              title:'',
              excerpt:''
            }
          }
      },
      mounted() {
          let params = this.$route.query;
          this.$api.getArticleDetail({id:params.id}).then((res)=>{
            this.article = res.data;
                    })
      }
    }
</script>

<style lang="scss">
  .newsDetail{
    width:100%;
    height:100%;
    padding: 0.1px 0 0 0;
    background: #fff;
    .newsTitle{
      text-align: center;
      font-size:30px;
      font-family:SourceHanSansCN-Medium;
      font-weight:500;
      color:rgba(51,51,51,1);
      line-height:30px;
      padding: 0 30px;
      margin: 60px 0 25px 0;
    }
    .newsTime{
      text-align: center;
      margin: 0 0 54px 0;
      font-size:24px;
      font-family:SourceHanSansCN-Regular;
      font-weight:400;
      color:rgba(153,153,153,1);
      line-height:18px;
    }
    img{
      width: 100% !important;
    }
    .ql-editor{
      height: auto;
      background: #fff;
       padding: 0 30px 0.1px 30px;
      p{
        font-size:24px;
        font-family:SourceHanSansCN-Regular;
        font-weight:400;
        color:rgba(128,128,128,1);
        line-height:36px;
        margin: 0 0 44px 0;
      }
      .ql-video{
        display: block;
        margin: 0 auto;
      }
    }

  }
</style>
